<template>
  <div>
    <template>
      <el-table :data="currentChargeProduct" border style="width: 100%">
        <el-table-column prop="" label="充值产品">
          <template v-slot="{ row }">
            <img
              style="vertical-align: middle"
              width="40%"
              :src="row.imageUrl"
              alt=""
            />
            &nbsp;
            <span style="color: #f4c14f; font-weight: bolder">{{
              row.productName
            }}</span>
            <br />
            <span>{{ row.description }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="单价"> </el-table-column>
        <el-table-column prop="address" label="数量">
          <template v-slot="{ row }">
            <el-input-number
              v-model="num"
              @change="handleChange(row)"
              :min="1"
              :max="10"
              label="描述文字"
            ></el-input-number>
            <i v-if="false">{{ row }}</i>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="描述文字"> </el-table-column>
        <el-table-column prop="" label="小计">
          <span class="realpay--price">
            {{ total_fee }}
          </span>
        </el-table-column>
      </el-table>
    </template>
    <div class="total-fee">
      <div class="box-wrap">
        <div class="box-shadow">
          <span
            class="realpay--title"
            data-spm-anchor-id="a210c.1.0.i0.52681deblyKpHg"
            >实付款：</span
          >
          <span class="realpay--price-symbol">¥</span>
          <span class="realpay--price" style="color: rgb(255, 80, 0)">
            {{ total_fee }}
          </span>
          <div class="order-confirmAddr">
            <div class="confirmAddr-addr-user">
              <span class="confirmAddr-title">充值详情：</span
              ><span class="confirmAddr-pro"
                >尊贵vip3充值-vip包月服务,心悦vip3,尊贵体验,强行踢人下线,你值得拥有</span
              >
            </div>
            <div class="confirmAddr-addr">
              <span class="confirmAddr-title">充值账户：</span
              ><span class="confirmAddr-usn">{{ userInfo.username }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="btn">
        <el-button type="danger" @click="commitOrder">提交订单</el-button>
      </div>
    </div>
  </div>
</template>

<script>
// 将vuex中的数据映射进来
import { mapMutations, mapState } from "vuex";
import * as api from "../../../api/index";
export default {
  data() {
    return {
      num: 1,
    };
  },
  computed: {
    ...mapState(["currentChargeProduct", "userInfo"]),
    total_fee() {
      //计算总价
      return this.num * this.currentChargeProduct[0].price;
    },
  },
  methods: {
      ...mapMutations(["SET_ORDER_ID"]),
    handleChange(value) {
      console.log(value);
    },
    commitOrder() {
     this.$confirm('您正在提交订单', '是否确认?', '提示', {
					confirmButtonText: '提交订单',
					cancelButtonText: '取消提交',
					type: 'warning'
				}).then(() => {
					//交互效果 让用户确认提交
					//1.发起请求,提交订单,后端会返回生成的订单号
					let product_id = this.currentChargeProduct[0].product_id;
					let quantity = this.quantity
					api.preOrderApi(product_id, quantity)
						.then(res => {
							if (res.data.state) {
								//订单创建成功
								//2.跳转到支付页面,根据订单号,发送请求,获取订单详情
								let order_id = res.data.order_id;//后台返回的订单id,通过订单id可以发起支付
								this.$router.push({ name: "pay" })
								this.SET_ORDER_ID(order_id)
								//提示
								this.$message({
									type: 'success',
									message: '订单提交成功!'
								});
							} else {
								this.$message.error("订单提交失败")
							}
							// console.log(res);
						})
					//3.得到订单详情,然后还需要发送支付请求
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消提交订单'
					});
				});
			}
    },
  
};
</script>

<style lang="less" scoped>
div {
  margin-top: 10px;
}

.price {
  color: #ff0036;
  font-weight: bolder;
}
.total_fee {
  font-size: 16px;
  color: #ff0036;
}
.el-button {
  width: 180px;
  border-radius: 0;
}
.confirm-title {
  text-align: left;
  margin-bottom: 30px;
}
.pre-order {
  padding: 80px 100px 0 100px;
}
.total-fee {
  margin-top: 50px;
  text-align: right;
}
.box-wrap {
  display: inline-block;
  border: 1px solid #ff0036;
  .box-shadow {
    border: 3px solid #fff0e8;
    min-width: 300px;
    padding: 10px 5px 10px 20px;
    .realpay--title {
      font-weight: 700;
      color: #333;
    }
    .realpay--price-symbol {
      font-size: 26px;
      margin-right: 4px;
      color: #999;
    }
    .realpay--price {
      color: #ff0036;
      font: 700 26px tahoma;
    }
    .order-confirmAddr {
      line-height: 1.6;
      font-weight: bolder;
      margin-top: 10px;
      font-size: 16px;
      // text-align: center;
      // font-family: "PingFang SC";
      .confirmAddr-usn {
        color: #ff0036;
        font-size: 20px;
      }
      .confirmAddr-pro {
        color: goldenrod;
        font-size: 16px;
      }
    }
  }
}
</style>

